:dir()

Baseline 2023

Newly available

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

La pseudo-classe CSS :dir() permet de cibler un élément selon la direction du texte qu'il contient.

css
/* Cible le contenu avec du texte */
/* écrit de droite à gauche */
:dir(rtl) {
  background-color: red;
}

:dir() ne prend en compte que la valeur sémantique de la direction, celle qui est définie par le document (la plupart du temps un document HTML). Elle ne tiendra pas compte de la direction liée à la mise en forme, purement stylistique, modifiée par des propriétés telles que direction.

Note : La pseudo-classe :dir() ne fonctionne pas de la même façon que le sélecteur d'attribut [dir=…]. Ce dernier utilise la valeur de l'attribut dir et il n'y a aucune correspondance lorsque l'attribut n'est pas défini (même si l'élément HTML hérite de la valeur de son élément parent). De la même façon [dir=rtl] ou [dir=ltr] ne pourront pas correspondre à la valeur auto qui peut être utilisée sur l'attribut dir. Au contraire, :dir() calculera la correspondance en fonction de la valeur utilisée par l'agent utilisateur (qu'elle soit héritée ou qu'elle vaille auto).

Note : En HTML, la direction est définie grâce à l'attribut dir. Pour les autres types de document, cela peut être déterminé autrement.

Syntaxe

La pseudo-classe :dir() nécessite un paramètre qui indique la direction du texte qu'on souhaite cibler.

css
:dir([ltr | rtl]) {
  /* ... */
}

Paramètres

ltr

Cible les éléments écrits de gauche à droite.

rtl

Cible les éléments écrits de droite à gauche.

Exemples

HTML

html
<div dir="rtl">
  <span>test1</span>
  <div dir="ltr">
    test2
    <div dir="auto">עִבְרִית</div>
  </div>
</div>

CSS

css
:dir(ltr) {
  background-color: yellow;
}

:dir(rtl) {
  background-color: powderblue;
}

Résultat

Spécifications

Specification
HTML Standard
# selector-ltr
Selectors Level 4
# the-dir-pseudo

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi

  • La pseudo-classe relative à la langue : :lang
  • L'attribut HTML lang
  • L'attribut HTML translate